<template>
  <el-dialog
          :model-value="visible"
          title="编辑"
          @close="dialogClose"
          width="45%"
  >
     <el-form :model="row" ref="formRef" :rules="formRules" label-width="125px">
        <el-form-item label="提醒名称：" prop="name">
          <el-input v-model="row.name"></el-input>
        </el-form-item>
        <el-form-item label="提醒类型：" prop="type">
           <el-radio-group v-model="row.type">
              <el-radio border :label='1' >工作提醒</el-radio>   <!-- label是字符串，:label是数字-->
              <el-radio border :label='2' >任务提醒</el-radio>
              <el-radio border :label='3' >其他提醒</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="提醒方式：" prop="way">
           <el-radio-group v-model="row.way">
              <el-radio border :label='1' >邮箱</el-radio>   <!-- label是字符串，:label是数字-->
              <el-radio border :label='2' >钉钉</el-radio>
              <el-radio border :label='3' >企业微信</el-radio>
            </el-radio-group>
        </el-form-item>
         <el-form-item label="邮箱收件人：" prop="user" v-if="row.way===1">
           <el-select class="m-2" filterable multiple v-model="row.user" @click="getUser" placeholder="请选择邮件收件人">
                <el-option v-for="row in user" :key="row.id" :label="row.first_name" :value="row.id">
                </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="钉钉：" prop="dingding_webhook" v-if="row.way===2">
            <el-input v-model="row.dingding_webhook" placeholder="请输入钉钉webhook"></el-input>
          </el-form-item>
          <el-form-item label="企业微信：" prop="weixin_webhook" v-if="row.way===3">
            <el-input v-model="row.weixin_webhook" placeholder="请输入企业微信webhook"></el-input>
          </el-form-item>
        <el-form-item label="最后提醒时间：" prop="last_datetime">
             <el-date-picker v-model="row.last_datetime" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择时间">
            </el-date-picker>
        </el-form-item>
         <el-form-item label="提前天数：" prop="advance">
            <el-input v-model="row.advance" placeholder="默认10，若立即提醒可填写0"></el-input>
          </el-form-item>
          <el-form-item label="备注：" prop="note">
            <el-input v-model="row.note" type="textarea"></el-input>
          </el-form-item>
      </el-form>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogClose">取消</el-button>
          <el-button type="primary" @click="submit">确定</el-button>
        </span>
      </template>

  </el-dialog>
</template>

<script>
    export default {
        props: {
            visible: Boolean,
            row: '',  // 当前行内容
        },
        data() {
            return {
                // 添加一个标志位来表示是否需要重新触发定时任务
                shouldEnableTask: false,
                user: '',
                formRules: {
                    name: [
                        {required: true, message: '请输入提醒名称', trigger: 'blur'},
                        {min: 2, message: '提醒名称长度应不小于2个字符', trigger: 'blur'}
                    ],
                   type: [
                      {required: true, message: '请选择提醒类型', trigger: 'blur'},
                   ],
                   way: [
                      {required: true, message: '请选择提醒方式', trigger: 'blur'},
                   ],
                   dingding_webhook: [
                      {required: true, message: '请输入钉钉webhook', trigger: 'blur'},
                   ],
                   weixin_webhook: [
                      {required: true, message: '请输入企业微信webhook', trigger: 'blur'},
                   ],
                   user: [
                      {required: true, message: '请选择邮件收件人', trigger: 'blur'},
                   ],
                   last_datetime: [
                      {required: true, message: '请选择时间', trigger: 'blur'},
                   ],
                   advance: [
                      {required: true, message: '请输入提前天数', trigger: 'blur'},
                   ],
                   note: [
                      {required: true, message: '请简要说明任务', trigger: 'blur'},
                   ],
                },
            }
        },
        methods: {
          dialogClose() {
            this.$emit('update:visible', false); // 当对话框关闭，通过父组件更新为false
            this.$parent.getData();
          },
          getUser() {
            this.$http.get('/config/user/?page_size=50')
                .then(res => {
                    this.user = res.data.data;
                });
            },
          //重新触发启动定时任务
          handleEnable(row) {
            this.$http.put('/remind_enable/', row, {timeout: 60000})
            .then(res => {
                if(res.data.code == 200) {

                } else {

                }
            })
            .catch(() => {

            })
            // 重置标志位，以便下次可以重新触发
            this.shouldEnableTask = false;
          },
          //监听保存确定按钮
          submit() {
            this.$refs.formRef.validate((valid) => {
              if (valid) {
                this.$http.put('/tools/remind/' + this.row.id + '/', this.row)
                  .then(res => {
                    if (res.data.code == 200){
                      this.$message.success('修改成功');
                      // 如果shouldEnableTask为true则调用触发启动定时任务
                      if (this.shouldEnableTask && this.row.status == 2) {
                        this.handleEnable(this.row);
                      }
                      this.dialogClose()  // 关闭窗口
                    }
                  })
              } else {
                this.$message.error('格式错误！')
              }
            })

          },
        },
        watch: {
             visible() {
                if(this.visible){  // 关闭窗口不请求
                    const user = this.row.user;
                    this.row.user = []; // [1,5,3]
                    for(let i in user) {
                        this.row.user.push(user[i].id)
                    }
                    this.getUser();
                }
            },
            //监控编辑事件修改后重重新触发启动定时任务
            'row.last_datetime': function (newVal, oldVal) {
              //   console.log(11,this.row)
              // 当 row.last_datetime 发生变化时，设置标志位为true
              this.shouldEnableTask = true;
            }
        }
    }
</script>

<style scoped>

</style>